import React, { Component } from 'react'

export default class Item extends Component {
  render() {
    console.log(this.props, 'Item接收来自List的数据');
    const { id, name, done } = this.props
    return (
      // 事件回调加()时候，返回值需要是一个函数，所以必须return一个函数
      <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ backgroundColor: this.state.mouse ? '#999' : '#fff', color: this.state.mouse ? '#fff' : '#000' }}>
        <label>
          <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
          <span>{name}</span>
        </label>
        {/* onClick={()=> this.handleDelete(id) }直接用函数形式，就不需要再用高阶函数return */}
        <button className="btn btn-danger" onClick={() => this.handleDelete(id)} style={{ display: this.state.mouse ? 'block' : 'none' }}>删除</button>
      </li>
    )
  }

  
  state = { mouse: false } //标识鼠标移入、移出

  // 鼠标移入、移出
  // 事件回调加()时候，返回值需要是一个函数，所以必须return一个函数
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag })
    }
  }

  // 改变单个勾选状态
  handleCheck = (id) => {
    return (e) => {
      this.props.updateTodo(id, e.target.checked)
    }
  }

  //删除一个todo的回调
  /* onClick={()=> this.handleDelete(id) }直接用函数形式，就不需要再用高阶函数return */
  handleDelete = (id) => {
    if (window.confirm('确定删除吗？')) {
      this.props.deleteTodo(id)
    }
  }
}
